{% extends "base.html" %}

{% block title %}Webmapper: {{ map.title }}{% endblock %}

{% block head %}
    <meta name="robots" content="noindex, follow" />
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key={{ GOOGLE_API_KEY }}" type="text/javascript"></script> 
    <link href="{{ WEBMAPPER_CSS_URL }}/Text.css" rel="stylesheet" type="text/css" />
    <!--[if !IE]>
    	<link href="{{ WEBMAPPER_CSS_URL }}/NoIETextSize.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <style type="text/css">
	#Map {width:400px; height:300px;}
    </style>

    <script type="text/javascript">
	var gMap01;
	var mapCenter;
	var mapRadius;
	var mapZoom;
	
        google.load('maps', '2.x');
        function doSetup() {
            var center = new google.maps.LatLng({{map_center_lat}}, {{map_center_lon}});
            gMap01 = new google.maps.Map2(document.getElementById('Map'));
            gMap01.setMapType(G_PHYSICAL_MAP);
            gMap01.setCenter(center, {{ map.zoom }});
            gMap01.enableScrollWheelZoom();
            gMap01.addControl(new GSmallMapControl());
            gMap01.addControl(new GMapTypeControl());
{% for layer in dynamic_layer_list %}
	    gMap01.addOverlay(new GGeoXml('{{ SITE_URL }}{% url layer-kml layer.unique_name %}'));
{% endfor %} {% for layer in static_layer_list %}
	    gMap01.addOverlay(new GGeoXml('{{ layer.kml_file.url }}'));
{% endfor %}
	    GEvent.addListener(gMap01, "moveend", function() {updateData();});
	    
	    mapCenter = gMap01.getCenter();
	    mapRadius = mapCenter.distanceFrom(gMap01.getBounds().getNorthEast());
	    mapZoom = gMap01.getZoom();
	    updateData();
        }
    
    function updateData() {
	var newCenter = gMap01.getCenter();
	var newRadius = newCenter.distanceFrom(gMap01.getBounds().getNorthEast());
	var newZoom = gMap01.getZoom();

	document.getElementById('map_center').value = newCenter.toUrlValue();
	document.getElementById('zoom').value = newZoom;
	document.getElementById('radius').value = newRadius;

	// Do I reload our data?
	var reload = false;
	if (newZoom != mapZoom)
	    reload = true;
	if (newCenter.distanceFrom(mapCenter) > mapRadius)
	    reload = true;
	    
	if (reload)
	{
	    mapZoom = newZoom;
	    mapCenter = newCenter;
	    mapRadius = newRadius;
	    // TODO: load new KML data.
	}
	document.getElementById('reload').value = reload;
    }
    </script> 
{% endblock %}

{% block body_attrs %}onunload="google.maps.Unload();" onload="doSetup()"{% endblock %}

{% block content %}
<div class="contentbox">
    <br />
    <table style="width: 100%">
	<tr>
	    <td style="width: 450px">
    <div style="width: 450px; height: 320px;">
	<div id="Map"></div>
    </div>
	    </td>
	    <td>
    <div>
	<ul>Layers
{% for layer in dynamic_layer_list %}
	    <li>{{ layer.unique_name }}</li>
{% endfor %} {% for layer in static_layer_list %}
	    <li>{{ layer.unique_name }}</li>
{% endfor %}
	</ul>
    </div>
	    </td>
	</tr>
    </table>
</div>
    
<div class="contentbox" style="text-align: center;">
    <br />
    Center: <input id="map_center" size="20"/>&nbsp;&nbsp;&nbsp;
    Radius: <input id="radius" size="18"/>&nbsp;&nbsp;&nbsp;
    Zoom: <input id="zoom" size="3"/>&nbsp;&nbsp;&nbsp;
    Reload: <input id="reload" size="4" />
    <br /><br />
</div>
{% endblock %}